<template>
  <view class="dy-scroll-container">
    <dy-navbar title="间隔槽" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-gap />
        </template>
      </dy-card>
      <!-- 间隔高度 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="间隔高度" />
        <template slot="body">
          <dy-gap height="40" />
        </template>
      </dy-card>
      <!-- 背景颜色 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="背景颜色" />
        <template slot="body">
          <dy-gap background="#f50" margin-bottom="50" />
          <dy-gap background="#ff508a" margin-bottom="50" />
          <dy-gap background="#5a7dff" />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Gap'
}
</script>
